<template>
	<view class="flex-col page">
		<view class="flex-col group">

			<view class="flex-col group_1">
				<view class="flex-col">
					<view class="flex-row section_1">
						<text class="text_1">身份证姓名</text>
						<input class="text_2" type="text" v-model.trim="realname" placeholder="请输入姓名" />
					</view>
					<view class="section_3 flex-row" style="position: relative;">
						<view class="" style="position: absolute;left: 36rpx;top: -18rpx;font-size: 22rpx;color: #999;">
							(身份信息只做审核使用)
						</view>
						<text class="text_6">身份证证件号</text>
						<input type="text" v-model="cardsn" class="text_7" placeholder="输入身份证件号" placeholder-class="">
					</view>
					<view class="flex-row section_2">
						<text class="text_3">性别</text>
						<u-radio-group style="margin-left: 48rpx;" v-model="radiovalue1" placement="row">
							<u-radio v-for="(item, index) in radiolist1" :key="index" style="margin-right: 8rpx;"
								activeColor=" #A973FF" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="section_3 flex-row">
						<text class="text_6">联系方式</text>
						<input class="text_7" type="number" disabled v-model.trim="mobile" placeholder="请输入联系方式" />

					</view>
					<!-- <view class="section_3 flex-row">
						<text class="text_8">技师年龄</text>
						<input class="text_9" type="number" v-model.trim="age" placeholder="请输入年龄" />
					</view> -->
					<view class="section_3 justify-between">
						<view class="flex-row">
							<text class="text_10">代理城市</text>
							<tm-pickersCity @confirm="selectedCity" btn-color="bg-gradient-deep-purple-accent"
								class="text_11">
								<text>{{ city ? city : '选择代理城市' }}</text>
							</tm-pickersCity>
						</view>
						<image
							src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61ab188e1f655f0011bbaece/61e7d9270c0e3200129ec72c/16425844611732717437.png"
							class="image_5" />
					</view>
					<view class="flex-row section_2">
						<text class="text_3">是否代理过团队</text>
						<u-radio-group style="margin-left: 48rpx;" v-model="radiovalue2" placement="row">
							<u-radio v-for="(item, index) in radiolist2" :key="index" style="margin-right: 8rpx;"
								activeColor=" #A973FF" :label="item.name" :name="item.name">
							</u-radio>
						</u-radio-group>
					</view>
					<view class="flex-col section_4">
						<text>代理过多少团队？</text>
						<view class="">
							<u--input placeholder="" border="surround" v-model="team"></u--input>
						</view>

					</view>
					<view class="flex-col section_4">
						<text>从事过什么行业？</text>
						<view class="">
							<u--input placeholder="" border="surround" v-model="industry"></u--input>
						</view>

					</view>
					<view class="flex-col section_4">
						<text>自我优势介绍</text>
						<view class="">
							<u--textarea v-model="advantage"></u--textarea>
						</view>

					</view>
				</view>

				<view class="flex-col items-center button" @click="submit">
					<text>提交</text>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
import tmPickersCity from '@/tm-vuetify/components/tm-pickersCity/tm-pickersCity.vue';
import {
	uploadImage
} from '@/config/utils'
export default {
	components: {
		tmPickersCity
	},
	data () {
		return {
			radiolist1: [{
				name: '男',
				disabled: false
			},
			{
				name: '女',
				disabled: false
			}],
			radiolist2: [{
				name: '是',
				disabled: false
			},
			{
				name: '否',
				disabled: false
			}],
			mssg: '',
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			radiovalue1: '男',
			radiovalue2: '是',
			realname: '',
			cardsn: '',
			mobile: uni.getStorageSync('user').phone,
			province: '',
			city: '',
			city1: '',
			district: '',
			age: "",
			avatar: '',
			desc: '',
			status: '',
			flag: false,
			team: '',
			industry: '',
			advantage: ''
		};
	},
	onLoad () {



	},
	methods: {
		goFan () {
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/my/my'
				})
			}, 800)
		},
		selectedCity (e) {
			this.city = e[0] + ' ' + e[1] + ' ' + e[2]
			this.province = e[0],
				this.city1 = e[1],
				this.district = e[2],
				console.log(this.city, "fnain")
		},
		upload () {
			uni.chooseImage({
				count: 1,
				success: (res) => {
					let {
						tempFilePaths
					} = res;
					let filePath = tempFilePaths[0]
					uploadImage(filePath).then(res => {
						this.avatar = res;
						console.log(res);

					})
					console.log(tempFilePaths)
				}
			})
		},
		submit () {
			console.log(this.city);
			if (!this.realname) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名'
				});
				return;
			}
			if (!this.cardsn) {
				uni.showToast({
					icon: 'none',
					title: '请输入身份证'
				});
				return;
			}
			if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确格式的手机号'
				});
				return;
			}

			if (!this.city) {
				uni.showToast({
					icon: 'none',
					title: '请先选择代理城市'
				});
				return;
			}
			this.$http.post('api/user/agency/apply', {
				username: this.realname,
				id_card: this.cardsn,
				phone: this.mobile,
				team_size: this.team,
				province: this.province,
				city: this.city1,
				district: this.district,
				trade: this.industry,
				sex: this.radiovalue1 == '男' ? 1 : 2,
				intro: this.advantage
			}).then(res => {
				uni.showToast({
					icon: 'none',
					title: '已提交审核，请耐心等待'
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/indexNew'
					})
				}, 1000)
			})
		}
	}
};
</script>

<style scoped lang="scss">
.topsrcomage {
	width: 100%;
	height: 100%;
}

.tyop {
	text-align: center;
}

.sersdrefuia {
	height: 550rpx;
}

.textbackground {
	width: 90%;
	height: 70rpx;
	background-color: #A973FF;
	color: white;
	border-radius: 50rpx;
	align-items: center;
	text-align: center;
	line-height: 70rpx;
	font-size: 30rpx;
	margin: 150rpx auto;
}

.centerser {
	width: 80%;
	height: 650rpx;
	background-color: white;
	border-radius: 15rpx;
	margin: -60rpx auto;
}

.topser {
	background-color: #A973FF;
	width: 100%;
	height: 350rpx;
}

.boxserss {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
}

.yin {
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999;

}

.dog {
	width: 70%;
	height: 10%;
	background-color: white;
	border-radius: 8rpx;
	margin: 100rpx auto;
	display: flex;
	align-items: center;
	justify-content: center;
}



.page {
	background-color: #f8f8f8;
	width: 100%;
	height: 100%;
	overflow-y: auto;

	.group {
		padding-bottom: 100rpx;
		flex: 1 1 auto;
		overflow-y: auto;
		padding-top: 20rpx;

		.image_1 {
			width: 100vw;
			height: 53.5vw;
		}

		.group_1 {
			margin-top: -10rpx;
			padding: 0 32rpx;
			position: relative;

			.button {
				margin-top: 90rpx;
				padding: 22rpx 0;
				color: rgb(255, 255, 255);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
				background-color: #A973FF;
				border-radius: 44rpx;
			}

			.section_1 {
				padding: 28rpx 24rpx;
				background-color: rgb(255, 255, 255);
				border-radius: 24rpx 24rpx 0px 0px;

				.text_1 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_2 {
					margin-left: 48rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}

			.section_2 {
				padding: 24rpx 24rpx 26rpx;
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
				background-color: rgb(255, 255, 255);

				.text_3 {
					margin-top: 4rpx;
				}

				.image_2 {
					width: 44rpx;
					height: 44rpx;
				}

				.image_3 {
					margin-left: 48rpx;
				}

				.text_4 {
					margin-left: 4rpx;
					margin-top: 4rpx;
				}

				.image_4 {
					margin-left: 40rpx;
				}

				.text_5 {
					margin-left: 4rpx;
					margin-bottom: 4rpx;
				}
			}

			.section_3 {
				padding: 28rpx 24rpx;
				background-color: rgb(255, 255, 255);

				.text_6 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_7 {
					margin-left: 48rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_8 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_9 {
					margin-left: 48rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.image_5 {
					margin-bottom: 6rpx;
					width: 32rpx;
					height: 32rpx;
				}

				.text_10 {
					color: rgb(0, 0, 0);
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					white-space: nowrap;
				}

				.text_11 {
					margin-left: 48rpx;
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					line-height: 40rpx;
					width: 450rpx;
				}
			}

			.section_4 {
				padding: 28rpx 23rpx 31rpx;
				color: rgb(0, 0, 0);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
				white-space: nowrap;
				background-color: rgb(255, 255, 255);
				border-radius: 0px 0px 24rpx 24rpx;

				.group_4 {
					margin-top: 31rpx;
					padding: 71rpx 0 71rpx;
					position: relative;

					.image_6 {
						margin-left: 71rpx;
						width: 56rpx;
						height: 56rpx;
					}

					.image_7 {
						border-radius: 24rpx;
						width: 198rpx;
						height: 198rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.avatar {
						border-radius: 24rpx;
						position: absolute;
						width: 198rpx;
						height: 198rpx;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 9;
					}
				}
			}
		}
	}
}
</style>